import React from 'react';
import { StyleSheet, Image, View, ScrollView, Text } from 'react-native';
import { ListItem, Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Ionicons';
import Alipay from 'react-native-yunpeng-alipay';

import { UserData } from '../Global';
export default class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: '钱包',
    headerStyle: {
      backgroundColor: '#2196F3',
    },
    headerTintColor: '#fff',
  };
  constructor(props) {
    super(props);
    this.state = {
      showLoading: true,
      vc: 0,
      vz: 0
    };
  }

  componentDidMount() {
    this.getList();
  }
  getList = async () => {
    let param = `user_id=${UserData.user_id}&access_token=${UserData.access_token}&login_type=2&vtype=1`;
    try {
      let response = await fetch('http://viquan.droyee.com/MyRuike/Wallet/get_wallet_info?' + param);
      console.log(response);
      let responseJson = await response.json();
      if (responseJson.status == 0) {
        let vc = responseJson.data.wallet.vc;
        let vz = responseJson.data.wallet.vz;
        this.setState({ vc, vz, });
      } else {
        alert(responseJson.msg);
      }
    } catch (err) {
      console.log(err);
      alert('网络错误');
    }
    this.setState({ showLoading: false });
  }
  render() {
    let { showLoading, vc, vz, } = this.state;

    return (
      <View style={styles.container}>
        <ScrollView style={styles.container}>
          <View style={{ flexDirection: 'row', backgroundColor: '#2196F3' }}>
            <View style={{ flex: 1, alignItems: 'center', }}>
              <Text style={styles.walletTitle}>VC</Text>
              <Text style={styles.balance}>{vc}</Text>
            </View>
            <View style={{ flex: 1, alignItems: 'center' }}>
              <Text style={styles.walletTitle}>V钻</Text>
              <Text style={styles.balance}>{vz}</Text>
            </View>
          </View>

          <ListItem
            title='充值'
            leftElement={<Icon name="ios-card" color='#517fa4' size={26} style={{ width: 28 }} />}
            rightIcon={{ name: 'ios-arrow-forward', type: 'ionicon', color: '#6e6e6e' }}
            bottomDivider={true}
            onPress={() => this.props.navigation.navigate('Recharge')}
          />
          <ListItem
            title='提现'
            leftElement={<Icon name="ios-cash" color='#FF9800' size={26} style={{ width: 28 }} />}
            rightIcon={{ name: 'ios-arrow-forward', type: 'ionicon', color: '#6e6e6e' }}
            bottomDivider={true}
            onPress={() => this.props.navigation.navigate('Withdraw')}
          />
          <ListItem
            title='收支明细'
            leftElement={<Icon name="ios-apps" color='#00BCD4' size={26} style={{ width: 28 }} />}
            rightIcon={{ name: 'ios-arrow-forward', type: 'ionicon', color: '#6e6e6e' }}
            bottomDivider={true}

            style={{ marginTop: 10 }}
          />
          <ListItem
            title='绑定支付宝'
            leftElement={<Icon name="ios-construct" color='#3F51B5' size={26} style={{ width: 28 }} />}
            rightIcon={{ name: 'ios-arrow-forward', type: 'ionicon', color: '#6e6e6e' }}
            bottomDivider={true}
            onPress={() => this.props.navigation.navigate('Wallet')}
          />

        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  walletTitle: {
    fontSize: 20,
    color: '#FFF',
    margin: 20
  },
  balance: {
    fontSize: 26,
    color: '#FFF',
    marginBottom: 20
  }

});
